<template>
  <a-drawer
    :visible="visible"
    title="维护租户平台内置业务角色"
    placement="right"
    width="50%"
    :destroyOnClose="true"
    @close="handleCancel"
    :maskClosable="false">
    <div>
      <!-- :selected-keys="selectedKeys" @select="onSelect"-->
      <a-tree
        v-if="!treeOnLoad"
        :tree-data="treeData"
        draggable
        blockNode
        v-model="checkedKeys"
        :defaultExpandAll="true"
        :replaceFields="replaceFields"
        checkable
        :autoExpandParent="true"
        @check="onCheck" >
        <template v-slot:title="nodeData">
          <div>{{ nodeData.name }}</div>
        </template>
      </a-tree>
    </div>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }">
      <a-button style="margin-right: 8px" @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleOk" :visible="visibleBtn" :loading="loadingBtn">保存</a-button>
    </div>
  </a-drawer>
</template>
<script>
import { detailTenants, editTenantsRoles } from '@/api/lessee'
import { getPlatformRoles } from '@/api/resource'
export default {
    data () {
        return {
            visible: false,
            loadingBtn: false,
            visibleBtn: false,
            // 树状图
            treeOnLoad: false,
            replaceFields: {
                children: 'children',
                title: 'name',
                key: 'roleId',
                value: 'roleId'
            },
            treeData: [],
            selectedKeys: [],
            checkedKeys: [],
            parameter: {
                tenantId: null,
                checkedKeys: []
            }
        }
    },
    methods: {
        // 显示
        openPower (row) {
            this.visible = true
            this.parameter.tenantId = row.tenantId
            getPlatformRoles().then(res => {
                if (res.code == 200) {
                    this.treeData = res.data
                    this.treeData.forEach(el => {
                        el.children = []
                    })
                    detailTenants(row.tenantId).then(res => {
                        if (res.code == 200) {
                            this.selectedKeys = res.data.roleTypes.map(item => {
                                return item.roleTypeId
                            })
                            this.checkedKeys = this.selectedKeys
                        }
                    })
                }
            })
        },
        // 选择的权限
        onCheck (checkedKeys) {
            this.checkedKeys = checkedKeys
            this.parameter.checkedKeys = checkedKeys
        },
        onSelect (selectedKeys, info) {
            this.selectedKeys = selectedKeys
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.treeData = [],
                this.selectedKeys = [],
                this.checkedKeys = [],
                this.parameter = {
                    tenantId: null,
                    checkedKeys: []
                }
            this.$emit('close')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            editTenantsRoles(this.parameter).then(res => {
                if (res.code === 200) {
                    this.$notification['success']({
                        message: '提示',
                        description: '保存成功！',
                        duration: 8
                    })
                    this.visible = false
                    this.$emit('success')
                } else {
                    this.$notification['error']({
                        message: '提示',
                        description: res.message,
                        duration: 8
                    })
                }
                this.visibleBtn = false
                this.loadingBtn = false
            })
        }
    }
}
</script>
<style scoped>
.footer {}
</style>
